<template>
  <div>
    <Card shadow>
      <div style="width: 300px; padding-top: 20px; padding-bottom: 20px">
        <Form ref="formValidate" :rules="ruleForm" :model="form" :label-width="100">
          <FormItem label="用户名" prop="name">
            <Input
              v-model="form.name"
              clearable
              maxlength="20"
              style="width: 200px"
              size="large"
              placeholder="请输入用户名"
            ></Input>
          </FormItem>
          <FormItem label="旧密码"  prop="oldPassword">
            <Input
              v-model="form.oldPassword"
              password 
              type="password"
              
              maxlength="32"
              style="width: 200px"
              placeholder="请输入旧密码"
              size="large"
            ></Input>
          </FormItem>
          <FormItem label="新密码" prop="newPassword">
            <Input
              v-model="form.newPassword"
              password
              type="password"
              
              maxlength="32"
              style="width: 200px"
              placeholder="请输入新密码"
              size="large"
            ></Input>
          </FormItem>
        </Form>

        <cus-button style="margin-left: 100px" @onClick="onSubmit">确认修改</cus-button>
      </div>
    </Card>
    <cus-footer></cus-footer>
  </div>
</template>

<script>
import { modifyUserInfo, getUserBaseInfo } from "@/api/organ/system";

export default {
  name: "personal_page",
  data() {
    return {
      form: {
        name: "",
        oldPassword: "",
        newPassword: "",
      },
      ruleForm: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
          {
            min: 5,
            max: 32,
            message: "密码长度为5-32位",
            trigger: "blur",
          },
         { validator: (rule, value, callback) => {
            let reg = new RegExp("[\\u4E00-\\u9FFF]+","g")
            if (reg.test(value)) {
                    callback(new Error('密码不能含有中文'));
                } else {
                    callback();
                }
        }, trigger: 'change'}
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 5,
            max: 32,
            message: "密码长度为5-32位",
            trigger: "blur",
          },
          {validator: (rule, value, callback) => {
            let reg = new RegExp("[\\u4E00-\\u9FFF]+","g")
            if (reg.test(value)) {
                    callback(new Error('密码不能含有中文'));
                } else {
                    callback();
                }
        }, trigger: 'change'}
  ],
      },
    };
  },
  mounted() {
    this.form.name = this.vuex_user.base.name;
  },
  methods: {
    onSubmit() {
      this.$refs['formValidate'].validate((valid) => {
                    if (valid) {
                      this.$cu
        .dialog({
          content: "确认修改?",
        })
        .then(() => {
          this.$Spin.show();
          this.modifyUserInfoApi().then(() => this.getUserBaseInfo());
        });
                    } else {
                        
                    }
                })
    
    },
    modifyUserInfoApi() {
      return new Promise((resolve) => {
        modifyUserInfo({
          name: this.form.name,
          oldPassword: this.form.oldPassword,
          newPassword: this.form.newPassword,
        }).then((res) => {
          if (res.code === 1) {
            this.$Message.success("编辑成功");
            this.$Spin.hide();
            resolve();
          } else {
            // this.$Message.error(res.msg);
          }
        });
      });
    },
    getUserBaseInfo() {
      return new Promise((resolve) => {
        getUserBaseInfo({}).then((res) => {
          if (res.code === 1) {
            res.data.token = this.vuex_user.token;
            this.$store.commit("$uStore", {
              name: "vuex_user",
              value: res.data,
            });
            resolve();
          }
        });
      });
    },
  },
};
</script>

<style lang="less"></style>
